<html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="范珍">
        <title>vue组件-10 杂项</title>
        <script src='vue.js'></script>
    </head>
    <body>
        <div id='app'>
        </div>
        <script>
         new Vue({
            el:'#app'
        })


        // 递归调用：自己内部调用自己,一定要注意结束条件
        // 避免死循环
        var count = 0 ;
        function test(){
            console.log('test');
            count ++ ;
            if(count<10){
                test();
            }
        }
        test();

        // 循环引用 ： A引用B，B引用A；
        // 注意要有打破循环的条件，否则还是死循环
        var iterator = 0 
        function a(){
            console.log('a');
            iterator ++;
            if(iterator<10){
                 b();
            }
        }
        function b(){
            console.log('b');
            a();
        }
        a();
        </script>
    </body>
</html>
 <!--
     1,,
        v-on: 事件监听       简写为  @
        v-bind: 属性绑定     简写为  :
        v-once: 一次绑定
        v-model: 双向绑定
        v-for: 列表渲染
        v-show: 显示与隐藏
        v-if,v-else-if,v-else 
    2,,

        el:作用范围
        data: 数据
        methods: 方法
        filters:过滤器
        computed: 计算属性
        watch: 监视属性
        components: 注册局部组件
        created;mounted;updated;destroyed: 生命周期函数

      3,,  组件

        注册组件: 全局注册 局部注册
        组件配置选项: 
                    template: 模板
                    data: 数据,function
                    props: 接收父组件传递的值
        组件通信: 
                父子组件: props, $emit, slot, 作用域slot
                非父子组件: bus (空的vue实例对象), Vuex(状态管理工具)
        动态组件: <component is=""></...>
                 <keep-alive></keep-alive>


        MVVM:
                model: 数据模型: 负责数据的操作
                view: 视图; 负责数据展示
                viewmodel: 视图模型;与视图相关的数据模型
                controller: 控制器; 控制数据往视图上展示
    -->

